<!--导入学历证书号-->
<template>
  <div class="wrapper-container">
    <div class="chose">
        <span class="label-name">请选择数据文件 ：</span>
        <div class="flex">
            <el-upload
                action="string"
                :show-file-list="false"
                :http-request="upLoadApi"
                accept=".xls,.xlsx"
                ref="upload"
                :auto-upload="false"
                :on-change="fileInfo">
                <div class="search-button color-purple right30" style="color: #5230E9">选择文件</div>
            </el-upload>
            <div class="flex" v-show="isFile">
                <el-input class="width191 right20" disabled v-model="fileUrL"></el-input>
                <div class="search-button color-warning width224 right30"  @click="uploadFWQ">
                    <img src="../../../assets/assessment/bk-export.png" alt="" />
                    <span>导入{{name}}申请与评定书编号</span>
                </div>
                <!-- <div class="search-button color-primary right30" @click="uploadFWQ">
                    <img src="../../../assets/assessment/icon-finish.png" alt="" />
                    <span>提交</span>
                </div> -->
                <div class="search-button color-warning width111" @click="downloadFile">
                    <img src="../../../assets/assessment/icon-import-orange.png" alt="" />
                    <span>下载模板</span>
                </div>
            </div>

        </div>
    </div>

  </div>
</template>

<script>
 import axios from 'axios'
 import fileDownload from "js-file-download"
export default {
  data() {
    return {
        isFile:true,
        fileUrL:'',
        requestUrl:'',
        name:'',
    };
  },
  mounted(){
      //导入学历证书号 /graduationConditions/importExcel；导入学位证书号：/bachelorConditions/importExcel
      if(this.$route.meta.title == '导入学历证书号'){
          this.requestUrl=  this.$store.state.studentUrl.baseUrl+'/graduationConditions/importExcel'
          this.name = '学历'
      }else{
          this.requestUrl=  this.$store.state.studentUrl.baseUrl+'/bachelorConditions/importExcel'
          this.name = '学位'
      }
  },
  methods: {
    fileInfo(file){
        if(file.name.indexOf("xlsx") == -1 && file.name.indexOf("xls") == -1){
            this.$message.error('请上传excl文件');
        }else{
            this.fileUrL = file.name;
            this.isFile = true;
        }
    },
    uploadFWQ(){
        this.$refs.upload.submit();
    },
    upLoadApi(item){
        let formData = new FormData();
        formData.append('file', item.file);
        axios.post(this.requestUrl,formData).then(res => {
            if(res.data.success){
                this.isFile = false;
                this.$message.success("导入成功！")
            }
        }).catch(error => {
            this.$message.error('上传失败');
        })
    },
    //下载模板
    downloadFile(){
        let data ;
        if(this.$route.meta.title == '导入学历证书号'){
            data = {fileModelName:'GraduationExcel'}
        }else{
            data = {fileModelName:'CertificateExcel'}
        }
        axios({
            method: 'get',
            url: this.$store.state.studentUrl.baseUrl+'/downloadModelFile',
            params:data,
            headers: {'Content-Type': 'application/octet-stream' },
                responseType: 'blob'
        }).then(res => {
            fileDownload(res.data, '学籍注册数据模板.xlsx');
        });
    }
  },
};
</script>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.right20{margin-right: 20px;}
.right30{margin-right: 30px;}
.width111{width: 111px;margin-right: 20px;}
.width224{width: 224px;}
.width191{
    width: 191px;
    /deep/.el-input__inner{
        height: 27px;
        line-height: 27px;
    }
}
.chose{
    margin-top: 25px;
    display: flex;
    align-items: center;
    .flex{
        display: flex;
        align-items: center;
    }
    .label-name{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 0px;
        color: #004CA7;
    }
}

.color-purple{
    background: #EBE6FF;
    border: 1px solid #5230E9;
    width: 100px;
    >span{color: #5230E9;}
}
.color-primary{
    width: 76px;
}
.color-warning{
    background: #FEF1E8;
    border: 1px solid #F86900;
    >span{color: #F86900;}
}
</style>
